<template>
	<view>
		<view class="comment-box">
			<view class="comment color_6D6D6D fontS32">共{{ commentLists.length }}条评论</view>
			<view v-for="(item,index) in commentLists" :key="index" class="mar_top40">
				<view @tap="isfocus = true" @click="onCommentOthers(item)" @longpress="onDeleteComment(item)"
					class="flex justify-between align-end pad_right20">
					<view class="flex align-center">
						<view class="head-portrait">
							<image :src="item.authorUserProfile" mode="aspectFill"></image>
						</view>
						<view class="mar_left15">
							<view class="color_222222 fontS28">{{item.authorNickname}}</view>
							<text class="fontS24 color_6D6D6D">{{ timestampToTime(item.createTime) }}</text>
						</view>
					</view>
					<view class="flex justify-between">
						<view @tap="onCommentLike(item)" class="flex align-center">
							<image class="width_40 height_40 mar_right8"
								:src="`/static/image/icon/like${item.liked?'_active':''}.png`" mode="">
							</image>
							<text class="color_222222 fontS24">{{ item.likes }}</text>
						</view>
						<view class="flex align-center mar_left50">
							<image class="width_40 height_40 mar_right8" src="/static/image/icon/comment.png" mode="">
							</image>
							<text
								class="color_222222 fontS24">{{item.subCommentsTotalSize ? item.subCommentsTotalSize : 0}}</text>
						</view>
					</view>
				</view>
				<view class="color_222222 fontS28 mar_top30 mar_bottom30 pad_right20">
					---{{item.content}}
				</view>
				<!-- 	<view class="upload-box mar_top20 flex flex-wrap">
					<view class="file-box" @tap="onPreviewImage(item.url)" v-for="(item,index) in fileList"
						:key="index">
						<template v-if="index < 6">
							<image class="file-image" :src="item.url" mode="aspectFill"></image>
						</template>
						<template v-if="index >= 4">
							<view class="file-num flex justify-center align-center">
								<image class="width_64 height_62" src="/static/image/icon/play.png" mode=""></image>
							</view>
							<view class="duration fontS26 color_fff">50秒</view>
						</template>
					</view>
				</view> -->
				<view v-if="!item.isUnfold && item.subComments.length > 0" class="flex align-center mar_top30">
					<view class="line"></view>
					<text class="fontS28 color_6D6D6D mar_left10 mar_right8"
						@click="open(item.uuid, index)">展开{{item.subCommentsTotalSize ? item.subCommentsTotalSize : 0}}条回复</text>
					<image class="width_32 height_32" src="/static/image/icon/arrow_b.png" mode=""></image>
				</view>

				<template v-if="item.isUnfold && item.subComments.length > 0">
					<view class="mar_left80">
						<commentList :criticList="item.subComments" @onReplyComments="onReplyComments"
							@onLongpress="onDeleteComment" @onLike="onCommentLike"></commentList>
					</view>
					<view class="flex mar_top30">
						<!-- <view @tap="item.isShow = false" class="flex align-center mar_right60">
						<view class="line"></view>
						<text class="fontS28 color_6D6D6D mar_left10 mar_right8">展开更多回复</text>
						<image class="width_32 height_32" src="/static/image/icon/arrow_b.png" mode=""></image>
					</view> -->
						<view @tap="packU(index)" class="flex align-center">
							<text class="fontS28 color_6D6D6D mar_left10 mar_right8">收起</text>
							<image class="width_32 height_32" src="/static/image/icon/arrow_t.png" mode=""></image>
						</view>
					</view>
				</template>
			</view>
		</view>

		<!-- <view :style="{height: equalHeight}"></view> -->

		<view class="placeholder">
			<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<!-- <view :class="[scrollHeight != 'auto' ? 'input-top' : '']" @tap.prevent.stop=""
					:style="{minHeight: scrollHeight}"> -->
				<view class="oper flex-row">
					<view class="input-box">
						<!--表情-->
						<image src="/static/image/icon/input_l.png" class="width_40 height_40">
						</image>
						<u-textarea :focus="isfocus" :autoHeight="true" border="none" :showConfirmBar="false"
							@focus="inputFocus" @blur="inputBlur" :adjustPosition="false" v-model="content"
							class="input" :placeholder="placeholder"></u-textarea>
					</view>
					<!--发送-->
					<view @touchend.prevent="" v-show="content" class="btn mar_right20" @click="send">发送</view>
					<!--附件-->
					<!-- <image @tap="togglePicker('file')" src="/static/image/icon/photo_album.png"
						class="width_40 height_40 mar_right20"></image> -->
					<image @tap="togglePicker('emoji')" src="/static/image/icon/meme.png" class="width_40 height_40">
					</image>
				</view>
				<view :style="{minHeight: scrollHeight}"></view>
				<!-- </view> -->
				<!--表情-->
				<view v-show="showEmoji" class="emoji" @tap.prevent.stop="">
					<scroll-view scroll-y class="list">
						<view class="item" @tap="content += item" v-for="(item, index) in emojis" :key="index">
							{{ item }}
						</view>
					</scroll-view>
				</view>
			</u-tabbar>
		</view>

		<u-action-sheet :actions="menuList" :closeOnClickOverlay="true" :safeAreaInsetBottom="true"
			:closeOnClickAction="true" cancelText="取消" :show="sheetShow" @select="onSelect" @close="sheetShow = false">
		</u-action-sheet>
	</view>
</template>

<script setup>
	import emoji from '@/plugins/emoji.js';
	import {
		timestampToTime
	} from '@/utils/common.js';
	import commentList from '@/components/commentList/commentList.vue';
	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// 输入内容
	const content = ref('')
	// 表情
	const emojis = ref([])
	const uuid = ref(); // 计划id
	const isfocus = ref(false); // 输入框是否聚焦
	const openShow = ref(false); // 展开评论状态

	// 
	const placeholder = ref('说点什么...')

	const params = ref({}) //请求参数
	const text = ref()
	// 评论列表
	const commentLists = ref([])
	const {
		proxy
	} = getCurrentInstance();

	// 评论点赞/撤销点赞
	const onCommentLike = (item) => {
		if (item.liked) {
			proxy.$api.deleteCommentLike({
				uuid: item.uuid
			}).then(res => {
				ResetData();
			})
		} else {
			proxy.$api.commentLike({
				uuid: item.uuid
			}).then(res => {
				ResetData();
			})
		}
	}
	// 删除评论
	const sheetShow = ref(false);
	const commentUuid = ref();
	const menuList = ref([{
		name: '删除',
		type: 'delete'
	}])
	// 长按事件
	const onDeleteComment = (item) => {
		isfocus.value = false;
		sheetShow.value = true;
		commentUuid.value = item.uuid
	}
	// 点击ActionSheet列表项时触发
	const onSelect = (el) => {
		if (el.type === "delete") {
			proxy.$api.deleteComment({
				uuid: commentUuid.value
			}).then(res => {
				ResetData();
			})
		}
	}

	// 获取评论
	const getPlanData = async (id) => {
		const res = await proxy.$api.getPlan(id)

		// 添加一个是否展开评论状态 --- isUnfold
		res.data.map((item, index) => {
			item.isUnfold = false;
			if (indexes.value === index && openShow.value) {
				item.isUnfold = true
			}
		})
		commentLists.value = res.data;
	}
	// 展开子评论
	const criticList = ref([]);
	const indexes = ref(null);
	const rootComment = ref();
	const open = (id, index) => {
		// 展开赋值当前id，防止丢失
		if (id) {
			rootComment.value = id;
		}
		indexes.value = index;
		openShow.value = true;
		proxy.$api.getPlan1(uuid.value, {
			rootComment: rootComment.value, // 展开所在uuid
			planUuid: uuid.value // 计划id
		}).then(res => {
			criticList.value = res.data
			commentLists.value.map((item, i) => {
				if (index === i) {
					item.subComments = [];
					return item.isUnfold = true, item.subComments = item.subComments.concat(
						criticList.value)
				}
			})
		})
	}

	// 收起评论
	const packU = async (index) => {
		indexes.value = null;
		openShow.value = true;
		const res = await proxy.$api.getPlan(uuid.value);
		commentLists.value.map((item, i) => {
			if (index === i) {
				return item.isUnfold = false;
			}
		})
		commentLists.value.forEach((item,index) => {
			res.data[index].isUnfold = item.isUnfold;
			res.data[index].subComments = item.subComments;
		})
		commentLists.value = res.data;
		openShow.value = false;
	}

	const onReplyComments = (el) => {
		isfocus.value = true
		onCommentOthers(el)
	}

	// 回复评论
	const onCommentOthers = (item) => {
		// 重复点击清除回复
		if (params.value.replyCommentUuid === item.uuid) {
			placeholder.value = `说点什么...`;
			params.value = {};
		} else {
			isfocus.value = true
			placeholder.value = `回复@${item.authorNickname}`
			params.value = {
				// authorUuid: item.authorUuid,
				// replyToUserUuid: item.authorUuid,
				// rootCommentUuid: item.uuid,
				replyCommentUuid: item.uuid
			}
		}
	}
	// 发表评论
	const send = async () => {
		params.value = {
			...params.value,
			content: content.value,
			planUuid: uuid.value
		}
		const res = await proxy.$api.addPlan({
			...params.value
		})
		if (res.code === "10000") {
			content.value = '';
			uni.showToast({
				title: "发布成功",
				duration: 2000
			})
			showEmoji.value = false;

			ResetData();
			params.value = {};
		} else {
			uni.showToast({
				title: "发布失败",
				duration: 2000,
				icon: "none"
			})
		}
	}

	const ResetData = () => {
		if (openShow.value) {
			open(rootComment.value, indexes.value);
		} else {
			getPlanData(uuid.value);
		}
	}

	const fileList = ref([{
		url: 'https://uiadmin.net/uview-plus/customer/ai.png'
	}, {
		url: 'https://uiadmin.net/uview-plus/customer/ai.png'
	}, {
		url: 'https://uiadmin.net/uview-plus/customer/ai.png'
	}, {
		url: 'https://uiadmin.net/uview-plus/customer/ai.png'
	}, {
		url: 'https://uiadmin.net/uview-plus/customer/ai.png'
	}, {
		url: 'https://uiadmin.net/uview-plus/customer/ai.png'
	}]);
	const showFile = ref(false)
	const showEmoji = ref(false)

	const scrollHeight = ref('auto')

	// 获取组件实例
	const equalHeight = ref(0);
	const instance = getCurrentInstance();
	const onEqualHeight = (e) => {
		let className = ".placeholder"
		// 查询节点信息的对象，获取节点高度
		const query = uni.createSelectorQuery().in(instance);
		query.select(className).boundingClientRect(data => {
			equalHeight.value = data.height + 'px'
		}).exec();
	}

	// 预览图片
	const onPreviewImage = (e) => {
		const imgList = []
		fileList.value.forEach(item => {
			imgList.push(item.url)
		})
		uni.previewImage({
			count: e,
			loop: true,
			urls: imgList
		})
	}

	const togglePicker = (type) => {
		if (type === "emoji") {
			showEmoji.value = !showEmoji.value
		}
	}

	const setScrollHeight = (descHeight = 0) => {
		// #ifdef MP-WEIXIN
		scrollHeight.value = `calc(${descHeight}px)`
		// #endif
		// #ifdef APP-PLUS
		// this.scrollHeight = `calc(100vh - 110upx - ${descHeight}px)`
		// #endif
		// #ifdef H5
		// this.scrollHeight = `calc(100vh - 110upx - 88rpx - ${descHeight}px)`
		// #endif
	}
	// 监听输入聚焦
	const inputFocus = (e) => {
		showEmoji.value = false
		setScrollHeight(e.detail.height)
		// onEqualHeight()
	}

	// 监听输入框失去焦点
	const inputBlur = () => {
		setScrollHeight('auto')
		equalHeight.value = 0
		isfocus.value = false
	}

	onLoad((option) => {
		uuid.value = option.id;
		getPlanData(option.id);
		emojis.value = emoji;
	})
</script>

<style lang="scss" scoped>
	.comment-box {
		padding: 20rpx 0 20rpx 20rpx;
	}

	:deep(.u-tabbar__content__item-wrapper) {
		height: auto !important;
		display: block !important;
		flex-direction: none !important;
	}

	.head-portrait {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

		image {
			width: inherit;
			height: inherit;
			border-radius: inherit;
		}
	}

	.upload-box {
		gap: 20rpx;

		.file-box {
			width: 224rpx;
			height: 224rpx;
			border-radius: 8rpx;
			position: relative;

			.file-image {
				width: inherit;
				height: inherit;
				border-radius: inherit;
			}

			.file-num {
				width: inherit;
				height: inherit;
				background-color: rgba(34, 34, 34, 0.5);
				border-radius: inherit;
				position: absolute;
				font-size: 64rpx;
				font-weight: bold;
				color: #FFFFFF;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}

			.duration {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				z-index: 1;
			}
		}
	}

	.line {
		width: 80rpx;
		height: 4rpx;
		background: #D9D9D9;
	}

	.oper {
		width: 750rpx;
		padding: 20upx 40upx;
		box-sizing: border-box;
		box-shadow: 0rpx -20rpx 26rpx 0rpx rgba(0, 0, 0, 0.05);

		.input {
			width: 100%;
			padding: 0 20upx;
			font-size: 28upx;
			border-radius: 10upx;
			width: calc(100% - 120upx - 20upx - 40upx - 60upx);
		}

		:deep(.u-textarea) {
			height: inherit !important;
			background-color: unset !important;
		}

		.input-box {
			flex: 1;
			min-height: 64rpx;
			display: flex;
			align-items: center;
			margin: 0 20rpx;
			background: rgba(109, 109, 109, 0.1);
			padding: 0 10rpx 0 20rpx;
			border-radius: 40rpx;
		}

		.btn {
			color: #fff;
			width: 90upx;
			height: 52upx;
			font-size: 24upx;
			line-height: 52upx;
			text-align: center;
			border-radius: 10upx;
			background-color: #E5725F;
		}
	}

	.emoji {
		height: 400upx;
		padding: 0 0 20upx 20upx;

		.list {
			width: 100%;
			height: 400upx;
			padding: 20upx 0;
			overflow: hidden auto;

			.item {
				float: left;
				display: block;
				height: 60upx;
				line-height: 60upx;
				width: calc(100% / 12);
				margin-right: 20upx;
			}
		}
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.input-top {
		// display: flex;
		// align-items: flex-start;
	}
</style>